<template>
    <div class="input-item">
      <el-form :model="deviceform"  ref="deviceform" :rules="rules" label-width="250px">
          <div class="parameType-wrap">
              <div class="parameType">
                <div class="button">
                  <!-- <span>网络服务配置</span> -->
                  <el-button style="float: right; padding:4px 8px;" type="primary" @click="operationClick">确定</el-button>
                </div>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="网络连接检测周期：" prop="CheckNetStatusInterval">
                    <el-input class="input-style" v-model="deviceform.CheckNetStatusInterval"><span slot="append">秒</span></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="内部通讯服务：" class="flex-item">
                    <el-form-item  style="width:27%;margin-right:1%" prop="MainRSAServerIP">
                      <el-input v-model="deviceform.MainRSAServerIP" placeholder="IP"></el-input>
                    </el-form-item>
                    <el-form-item style="width:27%" prop="MainRSAListenPort">
                      <el-input v-model="deviceform.MainRSAListenPort" placeholder="port"></el-input>
                    </el-form-item>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="终端代理管理服务："  class="flex-item">
                    <el-form-item  style="width:27%;margin-right:1%" prop="AgentRSAServerIP">
                      <el-input v-model="deviceform.AgentRSAServerIP" placeholder="IP"></el-input>
                    </el-form-item>
                    <el-form-item style="width:27%" prop="AgentRSAListenPort">
                      <el-input v-model="deviceform.AgentRSAListenPort" placeholder="port"></el-input>
                    </el-form-item>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="集中管理平台：" class="flex-item">
                    <el-form-item  style="width:27%;margin-right:1%" prop="CenterIP">
                      <el-input v-model="deviceform.CenterIP" placeholder="IP"></el-input>
                    </el-form-item>
                    <el-form-item style="width:27%" prop="CenterListenPort">
                      <el-input v-model="deviceform.CenterListenPort" placeholder="port"></el-input>
                    </el-form-item>
                    <span class="tips-style">（填0.0.0.0表示不与集中管理平台建立网络连接）</span>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="日志上送窗口周期" prop="CenterLogWindows">
                    <el-input class="input-style" v-model="deviceform.CenterLogWindows"><span slot="append">天</span></el-input>
                    <span class="tips-style">（0表示不上送）</span>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24">
                  <el-form-item label="日志上送间隔：" prop="CenterLogInterval">
                    <el-input class="input-style" v-model="deviceform.CenterLogInterval"><span slot="append">秒</span></el-input>
                    <span class="tips-style">（0表示不上送）</span>
                  </el-form-item>
                </el-col>
              </div>
          </div>
      </el-form>
    </div>
</template>

  <script>
  import { connrequest } from '@/api/firstPage'
  import { validNum, validIP } from '@/utils/validate'
  export default {
      data() {
          return {
              deviceform:{
                CheckNetStatusInterval:'0',
                MainRSAServerIP:'',
                MainRSAListenPort:'',
                AgentRSAServerIP:'',
                AgentRSAListenPort:'',
                CenterIP:'',
                CenterListenPort:'',
                CenterLogWindows:'0',
                CenterLogInterval:'0'
              },
              oldData:[],
              rules:{
                CheckNetStatusInterval:[{required:true,validator:validNum,trigger:'blur'}],
                MainRSAServerIP:[{required:true,validator:validIP,trigger:'blur'}],
                MainRSAListenPort:[{required:true,validator:validNum,trigger:'blur'}],
                AgentRSAServerIP:[{required:true,validator:validIP,trigger:'blur'}],
                AgentRSAListenPort:[{required:true,validator:validNum,trigger:'blur'}],
                CenterIP:[{required:true,validator:validIP,trigger:'blur'}],
                CenterListenPort:[{required:true,validator:validNum,trigger:'blur'}],
                CenterLogWindows:[{required:true,validator:validNum,trigger:'blur'}],
                CenterLogInterval:[{required:true,validator:validNum,trigger:'blur'}]
              }
          }
      },
      created(){
        this.getData()
        // console.log();

      },
      methods:{
        //
        async getData(){
          // const data = {}
            const res = await connrequest('GetParamNetGlobal')
        //   console.log(res.Data);
            this.deviceform = res.Data;
        //   this.oldData = res.Data;
        //   res.Data = res.Data.map(item => {
        //     for (const i in this.deviceform) {
        //       if (item.Name === i) {
        //         this.deviceform[i] = item.Value
        //       }
        //     }

        //   })
        },
        async operationClick(formName){
          this.$refs[formName].validate(async(valid) => {
            if (valid) {
              this.oldData = this.oldData.map(item => {
              for (const key in this.deviceform) {
                if(item.Name === key){
                  if (typeof this.deviceform[key] != 'string') {
                    item.Value = JSON.stringify(this.deviceform[key])
                  }else{
                    item.Value = this.deviceform[key]
                  }
                }
                }
                return item
              })
              const data = {
                Data:this.oldData
              }
              const res = await connrequest('SetParamThreshhold',data)
              this.$message.success('修改成功')
              this.getData();
            }
          })
        }
      }
  }
  </script>

  <style lang="scss" scoped>
  /* @import url(); 引入css类 */
    .parameType-wrap{
      display:flex;
      flex-wrap: wrap;
    }
    ::v-deep.input-item{
      // margin-top: 10px;
      .parameType{
        border: 1px solid #eceff5;
        border-radius: 3px;
        width: 980px;
      //   padding: 10px;
        margin: 0px;
        box-shadow: 0 0 10px #eceff5;
        .button{

          border-bottom: 1px solid #eceff5;
          padding-bottom : 32px;
        }
      }
      .el-form-item{
        margin-bottom: 18px;
      }
      .el-input-group__append, .el-input-group__prepend{
        width: 60px;
        padding: 0;
        text-align: center;
      }
    }
    .button{
      margin-bottom: 20px;
    }
    ::v-deep.el-form-item{
      label{
        font-weight: 500;
      }
    }
    .input-style{
        width: 55% !important;
    }
    .flex-item{
      ::v-deep .el-form-item__content{
        display: flex;
      }
      .el-form-item {
        margin-bottom: 0px;
      }
    }  
  </style>
